<template>
  <div>
    <van-nav-bar title="我的任务" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="mineLi">
      <div class="li" v-for="(item,index) in tabs" :key="index">
        <div class="tip">{{item.tip}}</div>
        <div class="details">
          <div class="left">
            <img src="@/assets/logo.png" alt="">
          </div>
          <div class="right">
            <div class="div">{{item.title}}</div>
            <div class="div">{{item.qqq}}</div>
            <div class="img" >
              <img src="@/assets/images/ic_stars.png" alt="" v-for="i in item.num">
              <img src="@/assets/images/ic_stars2.png" alt="" v-for="i in (5-item.num)">
            </div>
          </div>
        </div>
        <div class="sp1"><span>兑换ID：201905051234556765</span></div>
        <div class="sp2"><span>剩余时间：23天15小时30分钟30秒</span></div>
      </div>
    </div>
    <div class="screenshotsProof">
      <div class="top">
        <div class="sign"><img src="@/assets/images/title.png" alt=""></div>
        <span>截图凭证</span>
      </div>
      <div class="main">
        <div class="img">
          <img class="del" src="@/assets/images/ic_del.png" alt="" @click='del()'>
          <img src="@/assets/logo.png" alt="">
        </div>
        <van-uploader :after-read="onRead">
          <div class="img"><img src="@/assets/images/add.png" alt=""></div>
        </van-uploader>
      </div>
      <div class="note">
        <textarea name="" id="" cols="30" rows="10" placeholder="选填，请输入需要填写的备注"></textarea>
      </div>
    </div>
    <div class="btn">
      <input type="button" value="提交审核">
    </div>
  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/17 11:07.
     */

    export default {
        mounted() {

        },
        components: {},
        props: {},
        data() {
            return {
              tabs:[{
                title:'网红熊发传单',qqq:'地址在仓山万达金街，穿着网红熊外套发111111111111111...',num:3,tip:'查看奖品',type:true
              }],
            }
        },
        computed: {},
        methods: {
          //返回
          onClickLeft(){
            this.$router.go(-1)
          },
          //上传图片
          onRead(file) {
            console.log(file)
          },
          //删除图片
          del(){

          }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
  .mineLi{
    padding: 0 0.33rem;
    box-sizing: border-box;
    width: 100%;
    .li{
      position: relative;
      width: 100%;
      height: 3.4rem;
      border-bottom: 1px solid rgba(239,239,239,0.5);
      margin-top: 0.1rem;
      .tip{
        font-size: 0.3rem;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 1.42rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background: #FF695A;
        -webkit-border-radius: 0 0 0.1rem 0.1rem;
        -moz-border-radius: 0 0 0.1rem 0.1rem;
        border-radius: 0 0 0.1rem 0.1rem;
        color: #FFFFFF;
      }
      .details{
        width: 100%;
        height: 2.1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .left{
          width: 1.56rem;
          height: 1.56rem;
          margin-right: 0.2rem;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .right{
          width: 5rem;
          height: 1.56rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 0.36rem;
          .div{
            width: 5rem;
            text-align: left;
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
            color: #333333;
          }
          div:nth-child(2){
            color: #D2D2D2;
            font-size: 0.26rem;
          }
          .img{
            display: flex;
            flex-direction: row;
            justify-content: left;
            img{
              width: 0.39rem;
              height: 0.38rem;
              margin-right: 0.16rem;
            }
          }
        }
      }
      .sp1,.sp2{
        text-align: left;
        color: #D2D2D2;
        font-size: 0.26rem;
        line-height: 0.5rem;
      }
    }
  }
  .screenshotsProof{
    padding: 0 0.33rem;
    .top{
      width: 100%;
      height: 0.9rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #333333;
      font-weight: 700;
      font-size: 0.32rem;
      .sign{
        width:0.08rem;
        height:0.33rem;
        margin-right: 0.14rem;
        img
        {
          width: 100%;
          height: 100%;
        }
      }
    }
    .main{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap:wrap;
      margin-bottom: 0.88rem;

      .img{
        width: 2.2rem;
        height: 2.2rem;
        position: relative;
        margin-right: 0.08rem;
        margin-bottom: 0.08rem;
        img {
          width: 100%;
          height: 100%;
        }
        .del{
          width: 0.3rem;
          height: 0.3rem;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .note{
      width: 100%;
      textarea{
        width: 100%;
        height: 1.78rem;
        background: #F8F8F8;
        color: #ACACAC;
        font-size: 0.3rem;
        border: 0;
        line-height: 0.4rem;
        padding: 0.2rem;
        box-sizing: border-box;
      }
    }
  }
  .btn{
    width: 100%;
    height: 1rem;
    position: fixed;
    bottom: 0rem;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:0px -4px 12px 0px rgba(240,240,240,0.7);
    input[type='button']{
      border-radius: 0.4rem;
      height: 0.8rem;
      width: 6.96rem;
      background:linear-gradient(45deg,rgba(253,180,5,1),rgba(253,204,74,1));
      border: 0;
    }
  }
</style>
